/* Applies to the entire body of the HTML document (except where overridden by more specific
selectors). */
body {
  background-color: #eedfcb;
  font-family: arial, sans-serif;
  font-size: 14px;
  color: #403d32;
}

/* Applies to all <h1>...</h1> elements. */
h1 {
    font-size: 50px;
    font-weight: bold;
    margin: -3px 0px;
}

legend {
    margin:0 auto;
    font-size: 1.5em;
    font-weight: bold;
}

label {
    font-size: 1.2em;
    font-weight: bold;
}

p {
    font-size: 1.2em;
    font-weight: normal;
}

/* Applies to all elements with <... class="someclass"> specified. */
.someclass { color: red; }

/* Applies to the element with <... id="someid"> specified. */
#someid { color: green; }

.styled {
  border: 0;
  line-height: 2.5;
  padding: 0 20px;
  font-size: 1rem;
  text-align: center;
  color: #eedfcb;
  text-shadow: 1px 1px 1px black;
  border-radius: 8px;
  background-color: #473e33;
  background-image: linear-gradient(
    to top left,
    rgb(0 0 0 / 0.2),
    rgb(0 0 0 / 0.2) 30%,
    transparent
  );
  box-shadow:
    inset 2px 2px 3px rgb(255 255 255 / 0.6),
    inset -2px -2px 3px rgb(0 0 0 / 0.6);
}

.styled:hover {
  background-color: #eedfcb;
  color:  #473e33;
  text-shadow: 1px 1px 1px #cfa16e;
}

.styled:active {
  box-shadow:
    inset -2px -2px 3px rgb(255 255 255 / 0.6),
    inset 2px 2px 3px rgb(0 0 0 / 0.6);
}